npm install -g typescript
npx create-react-app my-app --template typescript
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
let 이름 :string = 'kim'
변수를 만들 때 타입지정하기.변수명 : 타입명
이렇게 쓴다
타입으로 쓸 수 있는 것들은 string
, number
,boolean
, bigint
, null
, undefined
,[]
, {}
등이 있습니다.
let 이름 :string = 'kim';
이름 = 123;
타입을 지정해놓으면 타입이 의도치 않게 변경될 경우 에러메세지를 띄워준다.
야! 이거 숫자야!
let 이름 :string[] = ['kim', 'Hong']
let 나이 :{ age : number } = { age : number }
array
혹은 object
자료는 이렇게 타입지정이 가능
let 이름 :string | number = 'kim';
이 변수에 여러가지 타입의 데이터가 들어올 수 있다면 |
기호를 이용해 or 연산자를 표현
type nameType = string | number;
let 이름 :nameType = 'kim';
type 키워드를 이용해 타입을 변수처럼 담아서 사용가능
type NameType = 'kim' | 'Hong';
let 이름 :NameType = 'kim';
string
number
이런 것 뿐만 아니라 나만의 타입을 만들어 사용가능하다.
원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim' 또는 'Hong'만 들어올 수 있는데, 이걸 literal type
이라고 함
function 함수명(x :number) :number{
return x * 2
}
함수는 파라미터와 return 값이 어떤 타입일지를 지정할 수 있다.
다른 타입이 파라미터로 들어오거나 return될 경우 야 너 틀렸어! 라고 함
함수는 return 타입으로 void를 설정가능한데 return이 없는지 체크한다. (쭉~ 밑에 기입)
//에러
function 함수명(x :number | string) {
return x * 2
}
//가능
function 함수명(x :number | string) {
if (typeof x === 'number'){
return x * 2
}
}
타입스크립트는 지금 변수의 타입이 확실하지 않으면 지멋대로 연산하지 않는다.
항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 허락해 줌.
참고하기 : https://velog.io/@boorook/TypeScript-Narrowing-Assertion
type Member = [number, boolean];
let john:Member = [100, false]
array
자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면 tuple
타입을 쓰면 됩니다. 대괄호 [ ]
안에 들어올 자료의 타입을 차례로 적어주면 됩니다.
type MyObject = {
name? : string,
age : number
}
let 철수 :MyObject = {
name : 'kim',
age : 50
}
object
타입도 정의가 너무 길면 type 키워드로 변수에 담아 버려~
type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방하다
특정 속성이 선택사항이면 물음표❓ 써도 됨.
type MyObject = {
[key :string] : number,
}
let 철수 :MyObject = {
age : 50,
weight : 100,
}
object
안에 어떤 속성이 들어갈지 아직 모른다면??? 전부 싸잡아서 타입지정도 가능
index signature
라고 함
let 이름 = 'kim';
let 나이 = 20;
이렇게만 써도 자동으로 이름변수는 string,
나이 변수는 number를 가진다
(변수명에 마우스 올려보면 바로바로 확인가능)
array, object 만들 때도 자동으로 알아서 됨
굳이 복잡하게 타입 명시할 필요 없음
let 이름;
이름 = 'kim';
심지어 변수만 만들고
나중에 가서 여기에 'kim'을 할당해도 타입이 자동으로 string으로 변함
let favorite :{ song :string, singer :string } = { song : '비밀의 화원', singer : 'IU' }
let project :{
member : string[],
days : number,
started : boolean,
} = {
member : ['kim', 'Hong'],
days : 20,
started : true,
}
함수에서 타입지정 가능한 부분은 두 개
function 내함수(x :number) :number {
return x * 2
}
파라미터 옆
에 적는다.우측
에 적으면 됩니다.함수에 멋있게 타입 실드를 장착했기 때문에 파라미터와 리턴값이 이상해지면 뭐라뭐라 오류가 난다~
function 내함수(x? :number) {
}
내함수(); //가능
내함수(2); //가능
x? x : number | undefined
란 의미라고 생각하면 됨.
void
는 '아무것도 없이 공허함'을 뜻하는 타입인데 return할 자료가 없는 함수의 타입으로 사용하면 된다.
function 내함수(x :number) :void {
return x * 2 //여기서 에러남
}
그럼 이제 이 함수에서 뭔가를 return하려고할 때 에러를 냅니다.
함수에 return 방지장치를 주고 싶을 때 void 타입을 활용하면 된다.
아직은 참 의아한 기능..?
function 자릿수세기(x :number | string){
return x + 1
}
이렇게 or 연산자를 사용해서 파라미터 타입을 지정하면 에러가 뜬당
타입스크립트에서는 이런 경우를 금지 시킴
왤까? 타입이 확실하지가 않으니까 이 파라미터 자체를 일단 못 쓰게 하는 것이다.
function 내함수(x? :number) :number {
return x * 2
}
이런 코드도 안된다고 나온다.
number
맞는데 왜?
x라는 파라미터는 옵션이고, 옵션인 파라미터는 number | undefined
이런 식으로 타입정의가 되기 때문에
그래서 아직 x라는 파라미터가 뭔지 확실하지 않기 때문에 에러 낸다...
이름을 파라미터로 입력하면 콘솔창에 "안녕하세요 홍길동"을 출력해주고, 아무것도 파라미터로 입력하지 않고 함수를 사용하면 "이름이 없습니다" 를 출력하는 함수
function sayHi(x? :string ){
if (x) {
console.log('안녕하세요 ' + x)
} else {
console.log('왜입력안함')
}
}
함수에 숫자 또는 문자를 집어넣으면 자릿수를 세어 출력해주는 함수
function 자릿수세기(x :number | string) :number {
return x.toString().length
}
결혼 가능 확률을 알려주는 함수
(언짢)
함수의 파라미터로 월소득(만원단위), 집보유여부(true/false), 매력점수 ('상' or '중' or '하') 를 입력할 수 있어야합니다.
월소득은 만원 당 1점, 집보유시 500점 & 미보유시 0점, 매력점수는 '상'일 때만 100점으로 계산합니다.
총 점수가 600점 이상일 경우 "결혼가능"을 return 해줘야합니다. 그 외엔 아무것도 return하지 않습니다.
function 결혼가능하냐(money :number, house :boolean, charm :string) :string|void{
let score :number = 0;
score += money;
if (house === true){
score += 500
}
if (charm === '상'){
score += 100
}
if (score >= 600){
return '결혼가능'
}
}
console.log(결혼가능하냐(100,true,'상'))
string이 아니라 '상' '중' '하' 라는 글자만 입력할 수 있게
더욱 엄격한 타입지정도 가능
(Literal type
)
초보자도 쉽게 볼수 있게 정리되어서 좋았어요 !과제도 너무 재밌게 보고가요