타입스크립트란..?
- TypeScript는 안전하고 예측 가능한 코드 구현에 초점을 맞춘 JavaScript의 상위집합(Superset)언어이다. 즉,타입스크립트는 자바스크립트의 슈퍼셋!
자바스크립트(동적타입) 런타임에서 동작할 때 타입 오류 확인!
타입스크립트(정적타입) 코드 작성 단계에서 타입 오류 확인!
타입스크립트를 자바스크립트로 변환 후, 브라우저나 Node.js 환경에서 동작!
타입스크립트 설치
- 설치 명령어
npm init -y:package.json생성
npm i -D typescript: 타입스크립트 의존성 설치
엄격모드를 적용하려면 어떻게 해야할까?
tsconfig.json 타입스크립트 옵션을 여기에 지정한다.
{
"compilerOptions": {
"strict": true
},
"include": [
"src/**/*.ts"
]
}"strict": true : use strict와 같은 역할
"include": ["src/**/*.ts"] : 타입스크립트 코드를 제공할 경로를 명시해준다.
타입스크립트를 자바스크립트로 변환하는 방법
package.json을 아래의 코드를 추가해준다.
"scripts": {
"tsc": "tsc src/main.ts"
},이렇게 하면 tsc명령을 통해서 타입스크립트를 자바스크립트로 변환할 수 있다.
npm run tsc를 하면 새로운 js파일로 ts가 변환된다.
npm i -D typescript parcel 파셀(2버젼) 번들러 설치
npm i -D typescript parcel-bundler 파셀(1버젼) 번들러 설치
eslint, prettier
eslint: 코드 오류를 확인해준다.
prettier: 코드 가독성을 향상시켜주는 포맷터이다.
`
npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier
@typescript-eslint/parser @typescript-eslint/eslint-plugin
eslint-plugin-prettier :eslint, prettier 동시에 사용한다.
eslint-config-prettier : eslint와 prettier가 비슷한점이많아서 충돌을 방지해주는 역할.
@typescript-eslint/parser : eslint가 타입스크립트 문법을 이해할 수 있도록 parser를 연결해준다.
@typescript-eslint/eslint-plugin : eslint에 타입스크립트를 연결해주는 것.
만약 현재 사용하는 컴퓨터가
window라면 "rules" 부분에 "prettier/prettier" 설정을 추가해줘야 오류가 나지 않는다. 이유는window와prettier의 개행방식이 다르기 때문이다.
// .eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
}
}
// .prettierrc
{
"semi": false,
"singleQuote": true,
"endOfLine": "lf"
}
자 이제 설정은 끝냈으니 본격적으로 타입스크립트에 대해서 공부해보자 ! !
타입 추론
- 추론이란 어떠한 판단을 근거로 삼아 다른 판단을 이끌어내는 것.
아래의 3가지 경우는 하나하나 타입을 지정하지 않아도 된다.
1) 초기화 된 변수
let a = "hello" //초기값으로 추론함
a = 123 // 불가
a= true // 불가2) 기본값이 지정된 매개변수
function join(a: string, b: string = ''): string {
return a + b
}
join("hello", "world");
join('good')
join('good', 123) // 불가
3) 반환이 있는 함수
function join(a: string, b: string = '') {
return a + b
}
const x = join("heelo", "word");타입 단언(Assertion)
- 단언이란 주저하지 아니하고 딱 잘라 말하는 것이다.
as, ! (Not-null 단언 연산자) 즉, null 도아니고 undefined도 아니다.
const btn = document.querySelector('button');
btn.classList.add('btn')
// 타입스크립트에서 btn은 null 일수도 있어서 오류가 난다.
// 또는 우리가 원하는 HTML 태그 일수 있다.즉, 여러 타입으로 존재할 수 있는 변수는 단언해줘야 한다.
해결 1) as 사용
const btn = document.querySelector('button') as HTMLButtonElement // HTML태그이다.
btn.classList.add('btn') 해결 2) ! 사용
const btn = document.querySelector('button') ! // null이 아니다.
btn.classList.add('btn') 타입가드(Guard)
- 타입 추론이 가능한 특정 범위(scope) 안에서 타입을 보장한다.
typeof,instanceof,in키워드를 사용한다.
// instanceof
const btn = document.querySelector('button') as HTMLButtonElement
if (btn) {
btn.classList.add('btn') // 가능
}
if (btn instanceof HTMLButtonElement) {
btn.classList.add('btn') // 가능
}
// typeof
function toTwoDeicmals(val: number | string){
if(typeof val === "number"){
val.toFixed(2);
} else {
val.slice(0,2);
}
} 타입 별칭(Alias)
- 원하는 타입을 조합하여 새로운 타입 조합 생성한다.
type키워드를 사용하여 선언한다.- 상속 불가 !
type MyTypeName = string | number
type MyArray = MyTypeName[]
type UserA = {
name: string
age: number
}
type UserB = {
isValid: boolean
}
type UserC = UserA & UserB
type MyName = string;
const name: MyName = 'pkb';타입 종류
문자, 숫자, 불리언 타입
let str: string = "Hello world";
let num: number = 123;
let boo: boolean = true;
str = 'Good morning~';
str = 123; // 오류
num = 'Good morning~'; // 오류
boo = false;
boo = 789; // 오류객체 타입
const obj: {} = {};
obj.a = 123; // 에러위에 코드는 자바스크립트에서는 문제가 되지 않지만 타입스크립트에서는 문제가 된다. 이유는 obj 에 a라는 속성 타입이 없기 때문이다.
const obj: { a: number } = {}; // 에러
obj.a = 123;이 또한 문제가 된다. 이유는 a라는 프로퍼티가 존재 하지 않기 때문이다.
그래서 밑에 처럼 작성해야한다.
const obj: { a: number } = { a: 0 };
obj.a = 123;배열 타입
배열에서 큰 타입을 정의했을 때 내부의 타입도 해당 타입과 내부 타입이 모두 동일하지 않으면 에러가 발생한다.
const arr: number[] = []
arr[0] = '123' // [123]
arr[1] = '456' // [123, '456'] 이라서 에러가 난다. 숫자만 들어갈수있다.
const arr: string[] = []
// 위 코드나 아래 코드 동일
const arr: Array<string> = [];튜플 타입
배열타입과 비슷하나 다른 것점은 고정된 길이의 배열 타입이다.
// const tup: number[] = [4,5]
// tup[2] = 6 // [4,5,6]
// tup[3] = 7 // [4,5,6,7]
// 대괄호를 열어서 배열처럼 지정하지만 각 item의 타입을 정의해준다.
// 즉 아래 코드는 숫자가 2개만 들어가야한다!
// const tup: [number, number] = [4,5]
// tup[2] = 6 // 에러 발생
// tup[3] = 7 // 에러 발생
// 내가 원하는 데이터 구조를 잘 명시해서 사용할 수 있다.
// [id, name, isValid]
// const userA: [number, string, boolean] = [1, 'Heropy', true]
// const userB: [number, string, boolean] = [2, 'Neo', false]
// const userC: [number, string, boolean] = [3, 'Evan', true, 'evan@gamil.com']함수 타입
화살표함수 구조로 매개 변수와 리턴값의 타입을 정의한다. 정의하는 구조랑 실제 함수의 구조는 동일하다. 매개 변수의 이름은 다르게 지정해도 상관 없다.
const hello: (a:string, b: number) => string = function(msg, xyz) {
return msg;
}
const hello2 = function (msg: string, xyz: number): string {
return msg;
}
function hello3(msg:string, xyz:number): string {
return msg;
}Enum 타입
타입 + 값(데이터)의 집합으로 역방향 매핑이 가능하다.
enum Week {Sun, Mon, Tue, Wed, Thu, Fri, Sat}
console.log(Week[0]) // 'Sun'
console.log(Week[6]) // 'Sat'
console.log(Week.Sun) // 0
console.log(Week.Sat) // 6위를 자바스크립트로 변환하면 밑에 처럼된다.
//js
const Week = {
0: 'Sun', 1: 'Mon', 2: 'Tue', 3: 'Wed', 4: 'Thu', 5: 'Fri', 6: 'Sat',
Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6
}
enum Colors {Red = 'r', Green = 4, Blue = 7}
console.log(Colors.Red) // 'r'
console.log(Colors[4]) // 'Green'
console.log(Colors.r) // 이렇게 Red를 조회하지는 못한다.void 타입
값을 반환하지 않는 함수의 반환 타입이다.
const hello: (msg: string) => void = msg => {
console.log(`Hello ${msg}`)
// return `Hello ${msg}`
}
hello('World!')느낀점😊😊😊
타입스크립트를 아주 예전에 살짝 맛만? 본 느낌으로 공부한적이 있는데 이번 기회에 제대로 한번 공부해봐야겠다. 과제를 할 때마다 자바스크립트로 정합성 체크할 때마다 골치 아팠었는데 타입스크립트를 이용하면 쉽게 잘 해결할 수 있을거 같으니 더 공부해야겠다 !
