strictNullCheck { "compilerOptions": { "target": "ES5", "module": "commonjs", "strictNullChecks": true } } 변수 조작을 하기 전에 null인지 확인하는 작업은 중요하다. 특히 html 조작을 할 때 셀렉터로 찾으면 null인 경우가 꽤 발생하니 많은 도움이 된다. 그러므로 tsconfig.json에 strictNullChecks 옵션을 켠다면 null이 들어왔는지 아닌지 확인할 수 있다. HTML 찾고 변경하기 let title = document.querySelector("#title"); title.innerHtml = "Hello"; // 에러 querySelector로 조회하고 innerHtml로 변경하는 방식은 ..

1. 함수에 type alias? 함수에는 들어갈 파라미터와 return에 타입을 지정할 수 있다. 여기서 함수의 타입에도 type alisa로 저장해서 쓸 수 있다. function add(x: number, y: number): number { return x + y } x와 y를 더해서 return 해주는 함수를 하나 만들었다. type NumOut = (x:number, y: number) => number; 따로 NumOut이라는 type으로 빼서 사용할 수 있다. 이때, 선언할 때는 화살표 함수 방식으로만 선언이 가능하다. type NumOut = (x:number, y: number) => number; let add :NumOut = function(x,y) { return x + y; }..

1. Literal Type ? 자바스크립트로 개발을 하다가 특정 변수는 1의 값만 가지게 하고 싶을 때가 있다. 그럴 경우 보통은 const 키워드를 사용해 const num = 1; 처럼 선언해서 사용한다. 그런데, 1 또는 0을 가질 수 있게 제한하고 싶은 경우에는 어떻게 해야할까? 그럴 때 바로 Literal Type을 이용해서 선언하면 된다. 사용하면 미리 정해둔 데이터만 변수가 가질 수 있게 만들어준다. 2. Literal Type 사용법 TypeScript로 타입을 지정할 때 string, number 같은 타입만 선언할 수 있는 것이 아니다. 일반 글자같은 것도 타입이 될 수 있다. let seo: "개발자"; let kim: "백수"; " 개발자 " 와 " 백수 " 같은 타입도 만들 수 ..

Type Aliases 타입스크립트로 코드를 작성하다보면 let 동물 :string | number | undefined; 길고 복잡하게 타입을 나열하는 경우가 많아진다. 긴 타입 정의가 보기 싫거나, 나중에 또 사용하는 타입인 경우에는 따로 변수에 담아서 사용할 수 있다. 타입을 변수처럼 만드는 것을 type 키워드를 통해서 가능하다. type 키워드를 사용하는 것을 type alias 라고 한다. type Animal = string | number | undefined; let 동물 :Animal; type 변수명 = 타입 종류 타입을 변수처럼 만드는 alias 문법이다. 일반적으로 타입 변수를 만들때는 대문자로 시작한다. type 키워드는 특징이 있는데, 바로 재정의가 불가능하다. type Nam..

함수에 Union을 사용하면... function 더하기(x: number | string) { // return x + 1; 에러 발생 } x는 숫자 또는 문자이기 때문에 +1을 해도 분명 코드상 문제가 없지만 에러를 발생시킨다. TypeScript는 number 타입 또는 string 타입만 + 연산이 가능한데, 현재 x는 number | string 타입이기 때문에 + 연산이 불가능하여서 에러가 발생한다. 즉, 아직 파라미터의 타입이 확실하지 않기 때문에 파라미터 조작 시 에러가 발생하는 것이다. function 함수(x? :number) :number { // return x + 1 에러 발생 } 또 이런 코드도 타입스크립트에서는 에러가 발생한다. x의 타입이 number 혹은 undefined ..

함수에는 2곳에 타입을 지정할 수 있다. 함수에는 총 두 군데 타입 지정이 가능하다. 1. 함수에 들어오는 자료 ( 파라미터 ) 2. 함수에서 나가는 자료 ( return ) function 함수( props :number) :number { return props * 2 } 파라미터로 받는 타입은 파라미터 옆에 적어주면 된다. 그리고 함수에서 return 되는 자료의 타입을 정해주고 싶으면, 함수명() 옆에 적어주면 된다. 설정을 해주면 파라미터와 리턴 값이 이상하면 에러를 나타낸다. - 파라미터에 타입을 지정하면 필수 파라미터가 된다. void 타입 함수에만 void라는 타입을 사용할 수 있다. ' 아무것도 리턴하지 않는다 ' 를 뜻하는 타입으로 리턴할 자료가 없는 함수의 타입으로 사용한다. func..

1. Union Type 특정 변수에 string또는 number 와 같이 변수 하나에 타입을 두개 주고 싶은 경우에 사용하는 타입이다. let 이름: string | number = "seo"; Union Type으로 string과 number를 지정한 경우 변수에는 string 또는 number만 들어올 수 있다. 그리고 값을 할당하는 순간 타입은 string 또는 number로 변하게 된다. array, object 자료를 만들 때 Union Type을 쓰려면 어떻게 할까? let arrayType: (number | string)[] = [1,"2",3] let objectType: {data : number | string} = {data : "123"} 배열을 사용할 때는 ()를 사용해서 타입..

변수에 타입 선언하기 타입스크립트는 변수를 만들 때 변수의 타입을 선언할 수 있다. let 이름: string = 'seo' ' 변수명: 타입 ' 으로 선언이 가능하다. 변수에 타입을 지정한 경우 해당 변수에 다른 타입을 할당하면 에러가 발생한다. var 이름 = "seo"; // 이름 = 123; --- 에러 기본 타입 종류 자주 쓰는 타입으로 string, number, boolean이 있다. let 이름 :string = 'seo'; let 나이 :number = 200; let 결혼 :boolean = false; 외에도 null, undefined 등이 있지만 자주 사용하는 타입은 아니다. array or object 타입 선언 여러 가지 자료를 한번에 저장할 때 array 또는 object 자..