본문 바로가기

전체 글402

[코딩애플] 함수와 methods에 type alias 지정하기 함수의 type alias아래 방식은  함수 표현식에서 type alias를 적용하는 예시이다.const addNumber = (x) => { return x + 2;} 위와 같이 변수에 할당해서 쓰는 듯 보이는 함수 방식을 함수 표현식이라 한다. type MathOperation = (a: number) => number;const addNumber: MathOperation = (a) => x + 2; 함수 표현식 작성하는 방법에서 변수 선언 키워드와 함수명만 지우고 type을 붙이면 된다. 그리고 매개 변수와 return 값이 어떤 타입인지 지정해주면 된다.콜백 함수의 type alias함수의 매개 변수로 함수가 전달 되는 것을 call back function이라 한다.const showMess.. Programing/TypeScript 2024. 6. 25.
[코딩애플] literal types, as const Literal type기존의 타입이 변수나 표현식의 자료형을 지정해주는 방법이었다고 하면,literal types는 아예 그 자료형의 값까지 지정해주는 방법이다.// type alias (타입 별칭)type UserID = string;type User = { id: UserID; name: string; age: number; isAdmin: boolean;};const user: User = { id: "12345", name: "장원영", age: 21, isAdmin: true,};// literal typestype Direction = 'north' | 'south' | 'east' | 'west';function move(direction: Direction) { consol.. Programing/TypeScript 2024. 6. 25.
[내배캠] React에서 TypeScript 시작하기 타입스크립트의 기초타입스크립트란?타입스크립트란 자바스크립트에 타입 시스템을 추가한 것. 타입 시스템이란, 프로그램이 실행되기 전(컴파일 타임)에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식이다.자바스크립트의 유연성을 막아주고 엄격하게 검사하기 때문에 프로그램의 에러를 상당 부분 예방해줄 수 있다는 장점이 있다. type Wonyoung = '장원영';const userName: Wonyoung = '안유진'; // 에러타입스크립트를 사용하는 이유1. 에러를 코드 작성 시에 미리 발견할 수 있다.자바스크립트의 경우 타입이 잘못 되더라도 일단 코드는 실행되기 때문에 프로젝트가 커지면 커질 수록 디버깅이 불가능에 가까워질 수 있다. 2. 더 빠른 실행 가능자바스크립트에서 변수나 표현식의 타입은 코드가 .. Programing/TypeScript 2024. 6. 25.
[코딩애플] Type Alias / readonly Type Alias타입의 별칭을 정하는 것이다.타입이 너무 길 때 사용하면 더 좋다. 기본적인 사용법은 아래와 같다.type 파스칼케이스별칭 = 자료형;const 변수명: 파스칼케이스별칭 = 값;일반 변수// 일반 변수type Username = string;type Age = number;let userName: Username = '장원영';let userAge: Age = 25; 객체 타입기본 사용법일반 변수는 짧아서 타입의 별칭을 지어주는 것이 매력적으로 느껴지지 않을 수 있지만 이제부턴 상황이 다르다.먼저 객체 타입은 데칼코마니로 타입을 지정해준다는 것이 기억날 것이다.const user = { name: '장원영', age: 21, job: '가수', isFemale: true} 위와 .. Programing/TypeScript 2024. 6. 25.
[코딩애플] 타입 확정하는 Narrowing / Assertion 타입스크립트의 엄격한 연산 조건타입스크립트에서는 자바스크립트에서 가능했던 느슨한 연산을 허용하지 않는다. // JSfunction addNumber(x) { return x + 2;}console.log(addNumber()); // NaN 예를 들어 매개 변수 x를 받는다고 함수를 정의하고, 실제로 아무 것도 전달하지 않아서 undefined를 전달해 준 셈이 되는 위와 같은 함수도 에러를 undefined * 2는 말이 안 되는 식이기에 에러가 나야 할 것 같지만 자바스크립트는 Not A Number만 출력해 줄 뿐 에러를 뱉진 않는다. 따라서 위와 같은 코드가 쓰여졌다 하더라도 자바스크립트는 다음 코드를 이어서 읽어 내려간다. 하지만 타입스크립트에서는 어림도 없다. // TSfunction a.. Programing/TypeScript 2024. 6. 25.
2024-06-24 마지막 스택을 남겨 둔 시점에서의 회고 어느덧 마지막 기술 스택 학습만을 남겨 두고 있다. 타입스크립트와 Next.js만 남겨 두고 있다.타입스크립트는 아직 대규모 프로젝트를 하지 않아서인지 필요성을 느낄 일이 없었지만,자바스크립트의 유연성 보다는 타입스크립트의 엄격함이 더 매력적으로 느껴지기도 한다. 작은 규모이지만 협업을 하면서 변수명이나 변수의 타입, 함수의 반환값 등에서 충분히 conflict가 날 수 있는 상황이 올 수 있음을 느꼈다. 그리고 next.js의 필요성은 이전부터 느끼고 있었다.회원 별 인가 조건에 따라 조건부 렌더링을 한다거나, 조건부 라우팅을 제공해야 할 때 CSR만으로는 한계가 느껴졌다.또한 민감한 API를 노출시키지 않는 방법 또한 CSR만으로는 부족하다는 것을 느끼게 되었다. 따라서 다음 과정은 매우 기대가 되고.. Programing/TIL 2024. 6. 24.
[코딩애플] 함수에 타입 지정하는 법, void 타입 함수에서의 타입 지정함수에도 타입 지정이 가능하다.두 군데 가능하다. 하나는 함수의 파라미터, 하나는 return 값이다. 자바스크립트에서의 함수의 기본형은 아래와 같다.function multiplyNumber(x) { return x * 2;} 여기서 x는 파라미터고, return 이하가 함수의 결과로 반환되는 값이다. 위 함수만 놓고 추측 컨데, x라는 파라미터는 숫자일 것이고, 당연히 return 값도 숫자일 것 같다. 하지만 자바스크립트에서는 다르다.function multiplyNumber(x) { return x * 2;}const x = '2';console.log(multiplyNumber(x)); // 4 위와 같이 문자와 숫자를 연산하는 것도 허용한다.타입스크립트의 엄격한 숫자 연.. Programing/TypeScript 2024. 6. 24.
[코딩애플] Union type, Any type, Unknown type Union type정의// 문자열let memberName : string = '장원영';// 숫자let age : number = 21;// 불리언let isSinger : boolean = true;// 배열let IveMembers : string[] = ['장원영', '안유진', '가을'];// 객체let wonYoung : { name: string, group: string } = { name: '장원영', group: '아이브' }; 모든 변수가 하나의 자료형으로 정해지면 좋겠지만, 숫자가 될 수도 있고 문자열이 될 수도 있는 경우도 많다. 그리고 배열 안에서도 인덱스마다 들어가는 값이 다를 수도 있고, 객체는 말할 것도 없다. 이런 경우 여러 가지의 자료형을 or 연산자 ( | )를 통해 .. Programing/TypeScript 2024. 6. 24.
[코딩애플] 변수 선언하기 타입스크립트의 변수는 자바스크립트와 비슷한데 변수명 뒤에 : 타입 만 명시해주면 된다. // 문자열let memberName : string = '장원영';// 숫자let age : number = 21;// 불리언let isSinger : boolean = true;// 배열let IveMembers : string[] = ['장원영', '안유진', '가을'];// 객체let wonYoung : { name: string, group: string } = { name: '장원영', group: '아이브' }; 배열과 객체가 특이한데, 배열은 위와 같은 형태로 쓰면 배열 안에 들어가는 모든 인덱스가 string 타입이라는 의미이고, 섞어서 쓰는 경우에는 union 타입을 지정해주면 되는데 이는 추후 배우.. Programing/TypeScript 2024. 6. 24.
[내배캠] TypeScript 개발 환경 세팅하기 node.js 설치node.js 가 설치되어 있어야 한다. 대부분은 VSCode를 설치하면서, 즉 개발 환경을 세팅하면서 설치하였을 테니 이 과정은 생략한다.본인이 npm 명령어를 사용해서 패키지를 설치하고 있었다면 설치가 된 것이다. 혹시 확인해보고 싶다면npm -vnode -v터미널에서 위 명령어로 각각의 버전을 확인해볼 수 있다.이후 터미널의 아래의 명령어를 프로젝트 내에서 입력하면 TypeScript로 파일을 작성할 수 있다.typescript 설치npm i -g typescript타입스크립트를 전역으로 설치한다는 명령어인데 yarn을 사용했던 사람들은 조금 더 설정이 복잡하다.yarn add typescript --devyarn tsc --inityarn add @types/react @type.. Programing/TypeScript 2024. 6. 24.

티스토리툴바