0. 공식 홈페이지
https://www.typescriptlang.org/
1. 설치
기본 자바스크립트
npm install -g typescript
이미 설치된 React 프로젝트에 설치
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
신규 React+typescript 설치
npx create-react-app my-app --template typescript
2. 변환
타입스크립트 파일(.ts) 를 자바스크립트 파일(.js)로 변환시키는 것을 컴파일 한다고 말하며 명령어는 tsc -w 이다
3. tsconfig.json
ts 파일을 js파일로 컴파일할때 설정들을 지정할수 있는 파일
4. 기본 타입(Primitive type)
배열과 객체는 아래와 같이 지정한다.
일일이 모든 변수에 타입을 지정 안해줘도 자동으로 지정이 된다.
(마우스 오버시 무슨 타입으로 지정이 되어있는지 나온다.)
5. Union, any, unknown
Union type
2개 이상의 타입을 합쳐서 지정할수 있다.
type test = number | string
let 이름 : test = 'kim'
이름 = 123let 회원들 : number | string[] = ['kim', 1 ] // 오류가 난다.
let 회원들 : (number | string)[] = ['kim', 1 ] // 정상any type
타입 지정을 해제하는 문법으로 오류가 나도 자동으로 검색이 안된다.
타입스크립트를 쓰는 의미가 없다.
let 이름 : any = 'kim'
이름 = 123unknown type
any 와 마찬가지로 모든 자료형을 허용해준다.
차이점은 오류가 나면 any와 다르게 검색이 된다.
6. 함수에 사용 (Void)
// 파라미터와 매개변수에 타입 지정
function 함수(a:number) :number {
return a *2
}
// 리턴되는 값이 없을 때 는 void를 사용한다.
function 함수 (a:number) :void {
b = a
}
// 파라미터가 옵션인 경우
function 함수 (a? :number) :void {
b = a
}
function 함수 (a : (number | undefined) ) :void {
b = a
}
함수() // 파라미터 없이 실행 가능7. Narrowing & assertion
Narrowing 문법
union type 인 경우 if 문 등을 사용하여 타입을 확정지어주는 것.
// a가 number 혹은 string 이라 에러 발생
function 함수(a : (number | string) ) :number {
return a + 2
}
// if 문으로 Narrowing 해줘야 함.
function 함수(a : (number | string) ) :number {
if(typeof a === 'number'){
return a + 2
}
}Assertion 문법
function 함수(a : (number | string) ) :number {
return (a as number) + 2
}if문 등의 Narrowing 문법을 안쓰고 임시로 타입을 지정해준다.
8. type alias & readonly
type alias
타입 지정도 변수에 담아서 재활용 및 코드의 양을 줄일수 있다.
type AnimalType = string | number | undefined;
let 동물 : AnimalType = 'kim'
let 동물 : AnimalType = 123
let 동물 : AnimalType객체 같이 복잡한 타입 지정도 변수를 활용하여 깔끔하게 정리가 가능하다.
type AnimalType = {name : string , age : number}
let 동물 : AnimalType = {name : 'kim' , age : 20}type 결합
타입끼리 결합하여 새로운 타입도 생성 가능하다.
type Name = string;
type Age = number;
type Person = Name | Age;객체 타입 extend 하기
type PositionX = {x : number}
type PositionY = {y : number}
type newPosition = PositionX & PositionY // {x : number, y : number }readonly
Const 변수는 재선언 및 재할당이 불가능하다. 그러나 자바스크립트 본연에서는 객체의 데이터는 수정이 가능하다.
const 여친 = {
name : '엠버'
}
여친.name = '유라' // 객체의 키값 내부의 데이터는 수정가능하다.그러나 타입스크립트에서는 readonly 속성을 사용하여 변경을 막을수 있다.
but 에러는 발생하나 js 파일에서 변경 및 실행은 된다. 단지 오류만 보여주는 것이다.
type GirlfriendType = {
readonly name : string
}
const 여친 :GirlfriendType = {
name : '엠버'
}
여친.name = '유라' // 타입스크립트 에러 발생9. Literal Types & as const
Literal Types
어떠한 변수가 미리 지정된 데이터만 가질수 있게 하는 기능
let 변수 : 'kim' | 'lee'
변수 = 'kim'
변수 = 'Lim' // 에러함수의 매개변수 및 리턴 값도 미리 지정을 해 놓을수 있다.
type temp = '가위' | '바위' | '보'
function (a : temp) : temp[] {
return ['가위']
}as const
var 자료 = {
name : 'kim'
}
function 내함수 (a : 'kim') {
}
내함수(자료.name) // 자료.name 은 'kim' 이므로 정상이여야 하나 에러 발생자료 객체의 name 타입은 {name : string} 이고
내함수 매개변수의 타입은 'kim' 이다.
위의 타입은 string 이고 아래의 타입은 'kim' 으로 서로 다르다!
var 자료 = {
name : 'kim'
} as const // 타입이 {name : 'kim'} 으로 설정된다.
function 내함수 (a : 'kim') {
}
내함수(자료.name) // 정상