인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다.
코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만)
타입스크립트 (Typescript)
공식문서 읽기
https://www.typescriptlang.org/docs/home.html
변수 선언 시에 초기 값을 적을때 타입을 적어줄 수 있다.
만약 너무나 확실한 값이라면 적지않아도된다.
자바스크립트는 유연한 언어여서 변수를 재정의할때 다른 타입을 넣을 수도 있는데,
타입스크립트에서 아래와 같이 초기값에 타입을 적어두면 재정의시에 초기 선언시의 타입과 다르다면 에러가 난다.
let num: number = 3;
let num: number;
let str: string = '안녕';
자바스크립트의 자유로움을 제한되는 것이 아닌가 생각할 수 있다.
자바스크립트는 약타입언어이며 장점이다.
하지만 실제로 프로젝트를 진행할때 하나의 변수에 다른 타입으로 재정의하는 경우가 많지 않다.
만약 해당 값을 가져와서 다른 타입을 넣어야한다면 아래와 같이 다른 변수를 선언해서 사용하고는 한다.
let num: number;
num = 3;
// 새로 변수를 선언하라
let str: string = num.toString();let str: string = String(num);타입스크립트를 쓰면 자유로움을 포기해야한다.
주의해야하는것이 있다.
타입을 대문자를쓰게되면 자바스크립트 객체를 사용하는것이 되므로 소문자로 작성해야한다.
// (X)
let num: Number;
// (O)
let num: number;
배열과 객체
배열에 숫자를 넣고 vscode에서 마우스를 변수위에 올려보면 let arr: number[]로 보여지는데
두개의 표기법으로 쓸 수 있다.
1.number[]
2.Array<number>
let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3];
배열이라는게 항상 같은 타입만 들어오는게 아니라면 or 연산자를 통해 해결할 수 있다.
let arr: (string | number | boolean)[] = [true, 2, '3'];
이것보다 더 엄격하게 명시적으로 표시하고 싶다면 아래와 같이 할 수 있다.
배열 length
let arr: [boolean, number, string] = [true, 2, '3'];그리고 이것을 튜플(Tuple)이라고 부른다.
재 정의시 에러가 난다.
let arr: [boolean, number, string] = [true, 2, '3'];
// 이런식으로하면 에러가난다.
arr[3] = 5;
또한 더 엄격하게 해당 배열의 값을 미리 정할 수도 있다.
예제는 해당 숫자, 텍스트만 들어갈 수 있도록 한 것이다.
let arr: [boolean, 3, string] = [true, 3, '3'];
arr[2] = 3;
let arr: [boolean, 'a', string] = [true, 'a', '3'];
여기서 알아야 할 것은 타입을 본인이 정하기 나름이라고 한다.
마우스를 변수에 올려보면 타입을 추론해주지만
코딩을 더 엄격하게 하고싶으면 타입 추론을 무시하고 문자열이나 숫자를 넣어줄 수 있다.