타입스크립트의 기본 개념을 잡기위해 노마드코더 무료강의 수강 중!
챕터 1은 거의 타입스크립트를 왜 사용하는지에 대한 설명이라 필요한 부분부터 포스팅합니다:)
노마드코더 Typescript로 블록체인 만들기 강의 정리 - 1 (챕터2까지)👊 내 것으로 만들자
🎞️2-1강 명시적표현과 암시적표현
타입스크립트는 똑똑하게 타입을 추론할 수 있지만
만약 추론을 하지 못할 경우에는 명시적표현을 통해 타입을 지정해주어야한다
명시적 표현을 하지 않아도 되는 경우
const a = 1 //타입스크립트가 a의 타입을 number라고 추론(암시적 표현) (Better)
const a : number = 1 // a의 타입은 넘버라고 타입을 미리 지정해줌.(명시적 표현)
//이런 경우에는 이미 오른쪽에 1이 들어가있기 때문에 타입스크립트가 타입을 추론할 수 있어서
//명시적 타입표현을 하지 않아도 됨명시적 표현을 해야 하는 경우
const a = [] //명시적표현을 하지 않아 타입스크립트가 a의 타입을 any[]로 추론
a.push(1), a.push('b') //어떤 타입이든 넣을 수 있게 되어버림
//이럴 때는
const a : number[] = [] //숫자로 구성된 배열로 타입을 지정(명시적 표현) (Better)
a.push('b') //올바르지 않다고 타입스크립트가 알려줄 것
//이렇게 타입스크립트가 타입을 알아서 추론하기 힘든 경우에는 명시적표현이 유용주의사항⛔
타입 추론이 가능한 상황에서는 명시적표현을 생략해야
코드의 길이, 코드작성시간, 가독성 측면에서 더 좋다.
명시적표현은 최소한으로 사용하기!
🎞️2-2강 TS의 Types - part 1
1. object의 타입을 명시적으로 지정해주는 방법
다른 string, array 등의 변수들과 마찬가지로 뒤에 :을 붙이고
타입을 지정한 객체를 붙여주면 된다.
const player : {
name:string,
age:number
} = {
name:"velog",
age:10
}2. 타입을 재사용하는 방법 = Alias(별칭)타입 생성하는 방법
만약 위의 player 객체와 형태가 동일한 객체를 여러개 생성하고 싶을 때,
매번 뒤에 : {name : string, age :number}를 반복해서 작성하는 것은 효율적이지 않다.
따라서 Alias타입을 생성해 재사용할 수 있다.
type Player = { //Alias 타입 생성
name:string,
age:number
}
const kevin : Player = { //Alias 타입 사용
name:"kevin",
age:20
}
const nico : Player = { //Alias 타입 재사용
name:"nico",
age:20
}주의사항⛔
Alias 타입을 너무 남발하지 않기!
굳이 Alias 타입을 사용할 필요가 없는 경우를 잘 구분해서 사용.
3. 선택적 타입
만약 Player 객체에서 age의 값은 선택적으로 부여할 수 있게 하고 싶다면?
선택적 타입 사용 -> :앞에 ?만 붙여주면 된다
type Player = {
name:string,
age?:number //age 선택적 타입으로 생성
}
const nico : Player = { //age가 선택적 타입이기 때문에 age값이 없어도 오류가 나지 않는다.
name:"nico"
}
4. 인자, 리턴값의 타입을 지정하는 방법
함수의 인자, 함수의 리턴값에도 타입을 지정할 수 있다.
//타입스크립트는 이 함수를 {name:string}의 객체를 리턴하는 것이라고 인식한다.
function makePlayer(name:string){
return {
name:name
}
}
const nico = makePlayer("nico")
nico.age = 12 //오류발생. age라는 키가 없기 때문
--------------------------------------------------------------------------
//Player타입을 리턴하고 있는 것이라고 말해주고 싶다면?
//이 함수는 Player타입의 객체를 리턴하는 것이라고 인식한다.
type Player ={
name:string,
age?:number
}
function makePlayer(name:string): Player { //객체의 리턴값의 타입을 지정하는 방법!
return {
name:name
}
}
const nico = makePlayer("nico")
nico.age = 12 //오류 발생하지 않음. makePlayer가 리턴하는 객체는 Player타입이기 때문
🎞️2-3강 TS의 Types - part 2
1. readonly 타입
자바스크립트는 읽기전용기능이 없는데 타입스크립트에서는 가능하다.
위의 makePlayer함수와 nico변수를 그대로 가져오고 Player 타입만 바꿔서 예제로 살펴보겠다.
//읽기전용 적용 방법
type Player = {
readonly name:string,
age?:number
}
nico.name = "koko" //라고 변경하려고 하면 오류가 생긴다. name의 타입은 읽기전용이기 때문!이렇게 함수 뿐 아니라 다른 것도 마찬가지로 readonly타입으로 만들 수 있다.
만약 readonly number[]이라는 타입을 가진 배열은 push등을 통해 배열에 요소 추가, 변경, 삭제가 불가능하다.
하지만 filter, map등 배열자체를 바꾸지 않는 메서드는 사용가능하다.
아직 활용방법은 잘 모르지만 개인적으로 너무 신기한 기능인 듯👍👍👍
타입스크립트는 정말 개발자의 실수를 막아주기 위한 언어구나...! 싶은 느낌
2. Tuple
자바스크립트에는 없는 또다른 기능.
요소의 개수, 타입, 순서가 정해진 배열을 만들 수 있다.
const player: [string, number, boolean] = ["nico", 20, true] //가능.
-------------------------------------------------------------
const player: [string, number, boolean] = ["nico", 20] //오류.
const player: [string, number, boolean] = ["nico", true, 20] //오류.
player[0] = 1 //오류. player[0]의 타입은 string으로 지정했기 때문이다.
//readonly와 Tuple을 합치는 것도 가능.
const player: readonly [string, number, boolean] = ["nico", 20, true]3. any
타입스크립트가 지정하는 기본타입. 타입을 추론할 수 없거나 지정되지 않은 경우 any 타입으로 인식한다.
어떤 타입이든 들어갈 수 있으므로 타입스크립트의 보호장치를 비활성화 한다고 할 수 있다.
그렇기 때문에 any를 꼭 사용해야 하는 상황이 아니라면 사용하지 않는 것을 추천!
🎞️2-4강 TS의 Types - part 3(타입스크립트만의 독특한 타입 3가지)
1. unkown
변수의 타입을 미리 알지 못할 때 unknown 타입을 지정한다.
예를 들어, api로부터 응답을 받는데 그 응답의 타입을 모른다면, unknown 타입을 사용한다.
let a:unkonwn;
let b = a+1 //오류. a의 타입은 unkown이기 때문에 한번 확인하는 절차를 걸쳐야한다.
if(typeof a === 'number'){ //가능. a의 타입이 number일 때만 코드를 실행하므로 오류가 나지 않는다.
let b = a + 1
}
-------------------------------
let b = a.toUpperCase(); //오류.
if(typeof a === 'string'){ //가능.
let b = a.toUpperCase();
}
2. void
아무것도 return하지 않는 함수의 타입이다.
void라고 명시적으로 지정해주지 않아도 함수가 리턴하는 값이 없다면 자동으로 void타입으로 인식한다.
타입스크립트만의 3가지 타입 중에 아마 가장 많이 사용하게 될 타입!!
const hello = () => { //타입을 확인해보면 :void라고 나온다.
console.log('x')
}
const a = hello();
a.toUpperCase(); //오류. void타입에는 toUpperCase가 불가능하기(없기) 때문이다.3. never
거의 사용되진 않지만 알고는 있어야하는 타입이다.
never는 함수가 절대 return하지 않는 경우의 타입인데, 타입이 두가지일 수도 있는 상황에 발생할 수 있다.
타입이 never인 함수에서 return을 하려고 하면 오류가 발생한다.
const hello = ():never => { //오류. 함수의 타입이 never인데 "x"를 리턴하려고 하니 오류가 난다.
return "x"
}
-------------------------------
const hello = (name:string|number) => {
if(typeof name === "string"){
name //타입 :string
} else if(typeof name === "number"){
name //타입 :number
} else {
name //타입 :never, 이 값은 절대 리턴되지 않는다.
}
}
무료강의이지만 너무너무 알차고 한국어 자막 퀄리티도 좋다...
정말 감사할 따름...!!! 얼른 강의 마치고 프로젝트 시작해보고 싶군요 😊
