본문 바로가기

Front-End: Web/TypeScript

 (23)
[코딩애플] ts part 2-3. never type 함수에 사용하는 never 타입도 있긴 합니다 쓸데는 없는데 나오면 알아야하니까 배워보자. function return 값에 붙일 수 있는 never type function 함수() :never { } void와 유사하게 리턴을 하지 않아야 한다. 하지만 엄격한 조건들이 있다. 조건 1) return 값이 없어야 함2) 함수실행이 끝나지 않아야 함 (=endpoint가 없어야 함) 사실 1) 2)가 동일한 말이긴 하다. 사실 함수는 return을 하지 않아줘도 undefined를 반환한다. fuction 함수() { return undefined; } 그래서 항상 함수는 리턴값을 가진다. 그렇기에 조건2를 충족하면 조건1도 자동적으로 충족시킨다. 함수가 절대 끝나지 않아야 never 타입을 지정할 수 ..
[코딩애플] ts part 2-2. Type Narrowng(2) Narrowing 할 수 있는 방법 더 알아보기 typeof 연산자로는 부족하다 Narrowing할 때 typeof 연산자 갖다쓰면 된다 했다. 근데 가끔은 typeof 키워드로 할 수 없는 Narrowing 상황들이 있다. null & undefined -> 타입체크하는 경우 매우 잦음 그 전에 테그닉 하나만 배우고 가자. 실제 코드를 짤 때 'undefined'라는 타입을 체크하는 경우가 엄청 많다. 예로 들어서 함수를 하나 만들었다 하자. 이 함수는 string 혹은 undefined다. function 함수(a :string | undefined){ } 이때 a를 그냥 쓰면 안된다. if 문을 써서 a가 string인지, undefined인지 체크해야 한다. 근데 이게 귀찮아서 대신 typeof ..
[코딩애플] ts part 2-1. rest parameter & destructuring 함수 rest 파라미터, destructuring 할 때 타입지정 rest parameter 타입 지정 가능 rest parameter 문법 설명 함수에 여러 파라미터가 들어간다고 하자. 근데 몇 개의 파라미터가 들어올지 아직 모른다. function 함수() { } 함수(1,5,23,6,2,3) 그럴 때 점 3개를 붙여서 rest parameter를 쓰면 된다. 파라미터 100만개 들어올 수 있다는 뜻이다. function 함수(...a){ console.log(a); // [1, 5, 23, 6, 2, 3] } 함수(1,5,23,6,2,3) 특징 다른 파라미터 있으면 맨 뒤에만 사용 가능 rest parameter 자리에 들어온 데이터는 전부 **[어레이]에 담아줌** rest parameter 타입..
[코딩애플] ts part 1-11. interface interface: Object에 타입지정하려면 type 키워드로 타입 변수를 생성할 수 있다고 했다. 근데 object의 경우에는 초이스가 두 가지다. type 키워드로 타입변수 생성 가능 interface 키워드도 타입변수 생성 가능 네모 라는 오브젝트가 있다고 해보자. 1) type 키워드로 타입변수 생성 let 네모 = { color: 'red', width: 100 } 이거 타입지정하려면 어떻게 해야하나? 타입은 자동으로 된다! 근데 만약 어려운 타입이 미리 들어가야 한다, 하면 type alias를 만들어서 쓰면 된다. type Square = { color :string, width :number }; 2) object 타입지정 시 interface 사용가능 interface Square {..
[코딩애플] ts part 1-10. class types class 만들 때 타입지정 가능 class 만들기 class Person { constructor(){ this.name = 'kim' } } let 사람1 = new Person(); let 사람2 = new Person(); 이제 Person 속성을 물려받은 사람 오브젝트들을 만들 수 있다. class 필드값 (constructor와 똑같은 역할) class 내에 대충 변수를 만들어서 집어넣을 수도 있다. class Person { data = 0; } 그리고 모든 자식들은 이 data 속성을 가져다 쓸 수 있다. 사람1.data; // 0 사람2.data; // 0 근데 이 필드값에 타입지정을 할 수도 있다. 생략하면 컴파일러가 알아서 data의 type을 number로 타입지정해준다. TypeS..
[코딩애플] ts part 1-9. TypeScript DOM Manupulation 타입스크립트로 HTML 변경과 조작할 때 주의점 당연히 TypeScript로 HTML 조작 가능. 근데 좀 다르다. // js document.getElementById(); index.html 파일을 생성하자. 안녕하세요 링크 버튼 그리고 tsconfig.json에 코드를 추가해서 strict mode를 켜주자. { "compilerOptions": { "target": "es5", "module": "commonjs", "strictNullChecks": true ⬅️ } } Null type이 들어올 때 엄격하게 체크해달라고 설정하는 것임 안의 글자를 바꿔보자 // js의 경우 let 제목 = document.querySelector("#title"); 제목.innerHTML = "반가워요"; 근데..
[코딩애플] ts part 1-8. method types 함수와 methods에 type alias 지정하는 법 type alias에 함수 type 저장해서 쓰는 법 화살표 함수로 지정해야 한다. 파라미터는 string 자료형, number 자료형으로만 반환 가능 type 함수타입 = (a :string) => number; 함수 type alias 부착하려면 "함수표현식"을 써야함 function 함수(){} // 함수 선언식 이렇게 함수를 만들지 말고 다르게 만들어야 한다. 함수를 정의하는 다른 방법일 뿐이다. let 함수 = function () {} // 함수 표현식 여기에 타입을 지정하면 된다. let 함수 :함수타입 = function () {} object안에 함수 만들 수 있음 let 회원정보 = { name: 'kim', plusOne(){ }..
[코딩애플] ts part 1-7. Literal Types Literal Types로 만드는 const 변수 유사품 Literal Types 변수에 뭐가 들어올지 더 엄격하게 관리 가능 예제1) 숫자 모든 숫자가 아니라 let 이름 :number; 숫자 123만 오도록 지정할 수 있다. let 이름 :123; 이름 = 456; // 에러 발생 예제2) union type 예제를 더 보자. union type도 가능하다. let 접니다 :'대머리' | '솔로'; 접니다 = ''; // 에러 발생. 대머리 or 솔로만 들어올 수 있다. 예제3) 함수 함수도 되나 테스트해보자. 파라미터에 'hello'자료만 들어올 수 있다. return 값도 가능하다. function 함수(a: 'hello') :1 | 0 { return 1; // or 0 } 함수('hello')..
반응형

티스토리툴바