JSX 타입지정 let 박스 :JSX.Element = let 버튼 :JSX.Element = 리액트는 변수나 자료에 를 담아서 사용할 수 있다. => 는 일반적인 HTML이 아닌 JSX문법이기 때문. 이때 타입지정을 추가로 하고 싶다면 변수명 : JSX.Element 타입을 사용할 것. function 컴포넌트 타입지정 function App(){ return ( ); } function Profile(props:{name:string, age:string}) :JSX.Element{ return( {props.name}입니다. ) } 1. 리액트 키워드인 props에 파라미터 타입지정을 할 수 있고, 2. 리턴 타입의 경우 :JSX.Element를 사용하면 된다. => 생략해도 자동으로 타입지정이 됨..
함수 return값의 타입정하기 function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a+1) //에러 발생 unknown타입으로 설정했기 때문에 계산식에서 에러가 발생하는 모습 1. narrowing 적절히 해서 에러 없애기 2. 가변적 타입 지정하기 => Generic 문법 Generic 적용하기 function 함수(x: T[]):T { return x[0] } let a = 함수([4,2]) let b = 함수(['4','2']) 1. 함수명 오른쪽의 안에 사용자정의 제네릭명을 임의로 입력. 2. 파라미터에 제네릭명 입력 => array의 경우 [ ] 포함 3. return 타입도 제네릭으로 지정가능 4. 함수를 ..
import export 사용 (a.ts) export var 이름 = 'hong'; export var 나이 = 20; (b.ts) import {이름, 나이} from './a' console.log(이름) 두 개 이상의 파일로 모듈화를 한 경우, 서로 변수를 주고받기 위해서 export 내보내고 import 가져오는 방법이다. import * from './a'; import *을 하면 모든 데이터를 가져올 수 있다. (a.ts) export type Name = string | boolean; export type Age = (a :number) => number; (b.ts) import {Name, Age} from './a' let 이름 :Name = 'kim'; let 함수 :Age = (..
protected 키워드 class User{ protected x=10; } protected 키워드를 통해 필드 생성 class NewUser extends User{ doThis(){ this.x = 20; } } => extends로 상속받은 자식까지 필드값을 사용할 수 있게 제한. this 연산자를 통해 부모의 필드값에 접근할 수 있음. static 키워드 class User { x = 10; y = 20; } let john = new User(); john.x //가능 User.x //불가능 static 사용 전 => 인스턴스 객체로 필드값을 접근할 수 있으나, 클래스. 필드 방법으로는 접근할 수 없음. class User { static x = 10; y = 20; } let john = ..
public 키워드 class User { public name: string; constructor(){ this.name = 'kim'; } } let 유저1 = new User(); 유저1.name = 'park'; //가능 속성값을 어디서나 수정할 수 있음. private 키워드 class User { public name :string; private familyName :string; constructor(){ this.name = 'kim'; let hello = this.familyName + '안녕'; //가능 } } let 유저1 = new User(); 유저1.name = 'park'; //가능 유저1.familyName = 456; //에러 발생 class { } 안에서만 속성값 수..
null & undefined 체크하는 법 1 && null && 3 // null 반환 undefined && '안녕' && 100 // undefined 반환 &&연산자 사용 => 기존 의미: 조건식 2개 비교 후 참/거짓 판별하는 논리연산자 => 자료형 비교 시: &&사이에서 처음 등장하는 falsy값을 찾고 그게 아니면 마지막 값을 반환 falsy값 : false와 유사한 기능을 가진 null, undefined, NaN 등의 값을 뜻함 Narrowing을 할 경우 &&연산자를 잘 이용하면 if문을 간략하게 줄일 수 있음. if (변수 && typeof strs === "string") {} 1. 변수가 falsy값을 가진다면 if문을 실행하지 않음. 2. 변수가 string값이라면 if문을 실행..
rest 파라미터 function 함수(...a:number[]){ console.log(a) } 함수(1,5,3,5,6,6) ... 키워드로 표현하며 파라미터의 개수를 예측하기 어려운 경우 사용 1. rest 파라미터는 일반 파라미터 뒤에만 올 수 있다. 2. rest 파라미터 자리에 넣은 값은 [ ] array 안에 모두 담겨있다. spread 오퍼레이터 let arr = [1,2,3]; let arr2 = [4,5]; let arr3 = [...arr, ...arr2]; console.log(arr3) ... 키워드로 rest 파라미터와 표현방식은 동일. 하지만 파라미터로 주는 값이 아니라, array나 object에 사용한다. 1. 위치는 상관없이 사용할 수 있다. 2. 괄호를 벗겨준다는 의미로 ..
interface 문법 interface Square { color :string, width :number, } let 네모 :Square = { color : 'red', width : 100 } type 문법이랑 크게 다를 것은 없다. 차이점을 설명하자면 1. 중복선언이 가능하다 interface Student {name : string} interface Student {score : number} Student라는 인터페이스 안에는 name과 score 변수가 둘 다 존재한다. extends 키워드 사용 전 interface Student { name :string, } interface Teacher { name :string, age :number } 다른 인터페이스이지만 중복되는 변수가 존..
