분류 전체보기 (432) 썸네일형 리스트형 [코딩애플] 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').. [코딩애플] ts part 1-6. Type Alias type alias: 타입도 변수에 담아쓰세요 type 키워드 써서 type alias 타입 변수 타입이 너무 길어지는 경우에 변수로 만들어서 간단하게 사용함 type alias 만드는 법 type Animal = string | number | undefined; let 동물 :Animal = 'kim'; object 타입을 변수에 담아보자. let 동물 :{ name: string, age: number } = { name: 'kim', age: 20 } type이 기니까 type으로 만들자. 훨씬 더 깔끔해진다. type Animal = {name: string, age: number}; let 동물 :Animal = {name: 'kim', age: 20} type 변수 작명 관습 일반 변수와 차.. [코딩애플] ts part 1-5. Narrowing & Assertion 타입 확정하기 function 내함수(x :number|string) { return x + 1; // 에러 발생 } 내함수(123); x는 number도 string도 아닌 number| string, 즉 union type이다. 그래서 타입이 확정되지 않아서 연산이 되지 않아 에러가 발생한다 했다. 이처럼 **Type이 아직 하나로 확정되지 않았을 경우**에 **Type Narrowing**을 써야 한다. Narrowing 어떤 변수가 타입이 아직 불확실하다면, 꼭 if문 등으로 Narrowing 해줘야 조작이 가능하다. Narrowing -> **타입을 하나로 정한다, 거른다는 의미** function 내함수(x :number|string) { if (x의 타입이 string){ // Narrowi.. [코딩애플] ts part 1-4. function parameter & return 함수에 타입 지정하는 법 함수 길고 복잡한 코드 한 단어로 축약 가능 **숫자 집어넣으면 다른 숫자 나오는 블랙매직박스 역할(input & output)** 함수는 파라미터, return값 타입지정 가능 **변수만 만들면 :any 자동 할당된다**. function 함수(x :number) :number { return x * 2; } 함수('6'); // 에러 발생 함수(30); // 60 x파라미터 자리에 숫자타입만 입력가능 return 되는 값은 숫자타입으로 제한함 함수에서 void 타입 활용 가능 void 텅 비었다는 의미. 리턴 없음. 실수로 뭔가 return하는 걸 사전에 막을 수 있다. function 함수(x :number) :void { return 1 + 1; // 에러 발생. retu.. [코딩애플] ts part 1-3. 타입을 미리 정하기 애매할 때(union type, any, unknown) 타입을 미리 정하기 애매할 때(union type, any, unknown) Union Type 타입 2개 이상 합친 새로운 타입 만들 수 있음 문자 or 숫자 들어올 수 있는 변수 만들기 let 회원 :number | string = 123; // 하나로 확정되어 type이 이제 number임 let 회원 :(number | string | boolean) = 123; // 소괄호 쳐도 됨 숫자 or 문자가 가능한 array /object 타입 지정하기 let 회원들 :(number | string)[] = [1,'2',3]; let 오브젝트 :{ a: number | string } = { a: '123' } 소괄호 없이 쓰면 큰일남. let 회원들 :number | string[] = [1,'2',.. [코딩애플] ts part 1-2. primitive types 타입스크립트 기본 타입 정리 (primitive types) JS문법 그대로 TS에서 사용 가능한데, 타입만 잘 지정해주면 된다. 저번에 셋팅해놓은 곳에 코드를 짜보자. 변수 만들기(변수에 타입지정 가능) 변수명 :타입명 let 이름 :string = 'kim'; 이름 = 123; // 에러: Type 'number' is not assignable to type 'string' (장점) 타입이 실수로 변경될 때 에러내줌 = 변수에 실드를 씌우는 것임. 다른 타입은 못 오도록.  let 이름 :string = 'kim'; let 나이 :number = 50; let 결혼했니 :null = null; // boolean, undefined, null 타입도 있음(쓸 일은.. 이전 1 ··· 12 13 14 15 16 17 18 ··· 54 다음