[TS]_JS에서 TS로 변환 연습하기

hanseungjune·2023년 2월 14일
0

비전공자의 IT준비

목록 보기
45/68
post-thumbnail

📌 예제 1

function greet(name) {
  return "Hello, " + name + "!";
}
function greet(name: string): string {
  return "Hello, " + name + "!";
}

📌 예제 2

function greet(name, message = 'Hello') {
  console.log(`${message}, ${name}!`);
}
function greet(name: string, message: string = 'Hello'): void {
  console.log(`${message}, ${name}!`);
}

📌 예제 3

function add(a, b) {
  return a + b;
}
function add(a: number, b: number): number {
  return a + b;
}

📌 예제 4

const double = (number) => {
  return number * 2;
}
const double = (number: number): number => {
  return number * 2;
}

📌 예제 5

const myObject = {
  name: 'Alice',
  age: 30,
  greet: function() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}
const myObject = {
  name: 'Alice',
  age: 30,
  greet: function(this: { name: string, age: number }): void {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

📌 예제 6

function doSomethingAsync(callback) {
  setTimeout(() => {
    const result = 'done';
    callback(result);
  }, 1000);
}
function doSomethingAsync(callback: (result: string) => void): void {
  setTimeout(() => {
    const result = 'done';
    callback(result);
  }, 1000);
}

📌 예제 7

function doSomethingAsync(callback) {
  setTimeout(() => {
    const result = 'done';
    callback(result);
  }, 1000);
}

doSomethingAsync(result => {
  console.log(result);
});

📌 예제 8

function doSomethingAsync(callback: (result: string) => void): void {
  setTimeout(() => {
    const result = 'done';
    callback(result);
  }, 1000);
}

doSomethingAsync(result => {
  console.log(result);
});

📌 예제 9

function logNames(...names) {
  console.log(names.join(', '));
}
function logNames(...names: string[]): void {
  console.log(names.join(', '));
}

📌 예제 10

function printLabel(labeledObj) {
  console.log(labeledObj.label);
}

const myObj = { size: 10, label: 'Size 10 Object' };
printLabel(myObj);

📌 예제 11

interface LabeledObject {
  label: string;
}

function printLabel(labeledObj: LabeledObject): void {
  console.log(labeledObj.label);
}

const myObj: LabeledObject = { size: 10, label: 'Size 10 Object' };
printLabel(myObj);

📌 예제 12

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers);
const numbers: number[] = [1, 2, 3, 4, 5];
const doubledNumbers: number[] = numbers.map(num => num * 2);
console.log(doubledNumbers);

📌 예제 13

// math.js
export const add = (a, b) => {
  return a + b;
};

export const subtract = (a, b) => {
  return a - b;
};

// app.js
import { add, subtract } from './math.js';

const result1 = add(1, 2);
const result2 = subtract(5, 3);

console.log(result1);
console.log(result2);
// math.ts
export const add = (a: number, b: number): number => {
  return a + b;
};

export const subtract = (a: number, b: number): number => {
  return a - b;
};

// app.ts
import { add, subtract } from './math';

const result1: number = add(1, 2);
const result2: number = subtract(5, 3);

console.log(result1);
console.log(result2);

📌 예제 14

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  start() {
    console.log("Starting the " + this.make + " " + this.model + "...");
  }
}
class Car {
  make: string;
  model: string;
  year: number;

  constructor(make: string, model: string, year: number) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  start(): void {
    console.log("Starting the " + this.make + " " + this.model + "...");
  }
}

📌 예제 15

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }

  celebrateBirthday() {
    this.age++;
    console.log(`It's my birthday! I'm now ${this.age} years old.`);
  }
}
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }

  celebrateBirthday(): void {
    this.age++;
    console.log(`It's my birthday! I'm now ${this.age} years old.`);
  }
}

📌 예제 16

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person = new Person('John Doe', 30);
person.greet();
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person: Person = new Person('John Doe', 30);
person.greet();

📌 예제 17

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}
class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
  
  speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

📌 예제 18

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const d = new Dog('Mitzie');
d.speak();
class Animal {
  protected name: string;

  constructor(name: string) {
    this.name = name;
  }

  public speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  public speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const d: Dog = new Dog('Mitzie');
d.speak();

📌 예제 19

const person = {
  name: 'John Doe',
  age: 30
};

console.log(`My name is ${person.name} and I'm ${person.age} years old.`);
interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: 'John Doe',
  age: 30
};

console.log(`My name is ${person.name} and I'm ${person.age} years old.`);

📌 예제 20

function greet(name, greeting = 'Hello') {
  if (name) {
    console.log(`${greeting}, ${name}!`);
  } else {
    console.log(`${greeting}!`);
  }
}

greet('John'); // prints "Hello, John!"
greet('Jane', 'Hi'); // prints "Hi, Jane!"
greet(); // prints "Hello!"
function greet(name?: string, greeting: string = 'Hello'): void {
  if (name) {
    console.log(`${greeting}, ${name}!`);
  } else {
    console.log(`${greeting}!`);
  }
}

greet('John'); // prints "Hello, John!"
greet('Jane', 'Hi'); // prints "Hi, Jane!"
greet(); // prints "Hello!"

📌 예제 21

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const john = new Person('John Doe', 30);
john.sayHello(); // prints "Hello, my name is John Doe and I'm 30 years old."
class Person {
  private name: string;
  private age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  public sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const john: Person = new Person('John Doe', 30);
john.sayHello(); // prints "Hello, my name is John Doe and I'm 30 years old."

📌 예제 22

function calculate(a, b, callback) {
  const result = callback(a, b);
  console.log(`The result is ${result}.`);
}

function sum(a, b) {
  return a + b;
}

calculate(2, 3, sum); // prints "The result is 5."
function calculate(a: number, b: number, callback: (a: number, b: number) => number): void {
  const result = callback(a, b);
  console.log(`The result is ${result}.`);
}

function sum(a: number, b: number): number {
  return a + b;
}

calculate(2, 3, sum); // prints "The result is 5."

📌 예제 23

// math.js

function sum(a, b) {
  return a + b;
}

function difference(a, b) {
  return a - b;
}

export { sum, difference };
// math.ts

export function sum(a: number, b: number): number {
  return a + b;
}

export function difference(a: number, b: number): number {
  return a - b;
}

📌 예제 24

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const john = new Person("John", 30);
john.sayHello(); // prints "Hello, my name is John and I am 30 years old."
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const john = new Person("John", 30);
john.sayHello(); // prints "Hello, my name is John and I am 30 years old."

📌 예제 25

function greet(name, greeting = "Hello") {
  console.log(`${greeting}, ${name}!`);
}

greet("John"); // prints "Hello, John!"
greet("Jane", "Hi"); // prints "Hi, Jane!"
function greet(name: string, greeting: string = "Hello"): void {
  console.log(`${greeting}, ${name}!`);
}

greet("John"); // prints "Hello, John!"
greet("Jane", "Hi"); // prints "Hi, Jane!"

📌 예제 26

const person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA"
  }
};

console.log(`Hello, my name is ${person.name} and I am ${person.age} years old.`);
interface Address {
  street: string;
  city: string;
  state: string;
}

interface Person {
  name: string;
  age: number;
  address: Address;
}

const person: Person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA"
  }
};

console.log(`Hello, my name is ${person.name} and I am ${person.age} years old.`);

📌 예제 27

class Animal {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }

  makeSound() {
    console.log("Some animal sound");
  }

  move(distance) {
    console.log(`${this.name} the ${this.type} has moved ${distance} meters.`);
  }
}

const dog = new Animal("Buddy", "dog");
dog.makeSound(); // prints "Some animal sound"
dog.move(10); // prints "Buddy the dog has moved 10 meters."
class Animal {
  private name: string;
  private type: string;

  constructor(name: string, type: string) {
    this.name = name;
    this.type = type;
  }

  public makeSound(): void {
    console.log("Some animal sound");
  }

  public move(distance: number): void {
    console.log(`${this.name} the ${this.type} has moved ${distance} meters.`);
  }
}

const dog: Animal = new Animal("Buddy", "dog");
dog.makeSound(); // prints "Some animal sound"
dog.move(10); // prints "Buddy the dog has moved 10 meters."

📌 예제 28

function addNumbers(a, b) {
  return a + b;
}

console.log(addNumbers(2, 3)); // prints 5
function addNumbers(a: number, b: number): number {
  return a + b;
}

console.log(addNumbers(2, 3)); // prints 5

📌 예제 29

const person = {
  name: "John Doe",
  age: 30,
  isStudent: true
};

function printPersonInfo(person) {
  console.log(`Name: ${person.name}, Age: ${person.age}, Is Student: ${person.isStudent}`);
}

printPersonInfo(person); // prints "Name: John Doe, Age: 30, Is Student: true"
interface Person {
  name: string;
  age: number;
  isStudent: boolean;
}

const person: Person = {
  name: "John Doe",
  age: 30,
  isStudent: true
};

function printPersonInfo(person: Person): void {
  console.log(`Name: ${person.name}, Age: ${person.age}, Is Student: ${person.isStudent}`);
}

printPersonInfo(person); // prints "Name: John Doe, Age: 30, Is Student: true"

📌 예제 30

function printLength(value) {
  console.log(`Length of ${value} is ${value.length}`);
}

printLength("Hello, world!"); // prints "Length of Hello, world! is 13"
function printLength(value: string): void {
  console.log(`Length of ${value} is ${value.length}`);
}

printLength("Hello, world!"); // prints "Length of Hello, world! is 13"

📌 예제 31

function mergeObjects(obj1, obj2) {
  return { ...obj1, ...obj2 };
}

const obj1 = { foo: "foo" };
const obj2 = { bar: "bar" };

const mergedObj = mergeObjects(obj1, obj2);

console.log(mergedObj); // prints "{ foo: 'foo', bar: 'bar' }"
function mergeObjects<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

const obj1 = { foo: "foo" };
const obj2 = { bar: "bar" };

const mergedObj = mergeObjects(obj1, obj2);

console.log(mergedObj); // prints "{ foo: 'foo', bar: 'bar' }"

📌 예제 32

class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log("Animal sound");
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  makeSound() {
    console.log("Woof!");
  }
}

const myDog = new Dog("Fido", "Labrador");

console.log(myDog.name); // prints "Fido"
myDog.makeSound(); // prints "Woof!"
class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound(): void {
    console.log("Animal sound");
  }
}

class Dog extends Animal {
  breed: string;

  constructor(name: string, breed: string) {
    super(name);
    this.breed = breed;
  }

  makeSound(): void {
    console.log("Woof!");
  }
}

const myDog = new Dog("Fido", "Labrador");

console.log(myDog.name); // prints "Fido"
myDog.makeSound(); // prints "Woof!"

📌 예제 33

function identity(arg) {
  return arg;
}

const str = identity("hello");
console.log(str); // prints "hello"

const num = identity(42);
console.log(num); // prints 42
interface GenericIdentityFn<T> {
  (arg: T): T;
}

function identity<T>(arg: T): T {
  return arg;
}

const str: string = identity("hello");
console.log(str); // prints "hello"

const num: number = identity(42);
console.log(num); // prints 42

📌 예제 34

function logPerson(person) {
  console.log(`Name: ${person.name}, Age: ${person.age}, Address: ${person.address}`);
}

const person = { name: "John", age: 30, address: { city: "New York", state: "NY" } };
logPerson(person);
interface Address {
  city: string;
  state: string;
}

interface Person {
  name: string;
  age: number;
  address: Address;
}

function logPerson(person: Person) {
  console.log(`Name: ${person.name}, Age: ${person.age}, Address: ${person.address.city}, ${person.address.state}`);
}

const person: Person = { name: "John", age: 30, address: { city: "New York", state: "NY" } };
logPerson(person);

📌 예제 35

function buildPerson(name, age, ...contact) {
  const [phone, email] = contact;
  return { name, age, phone, email };
}

const person = buildPerson("John", 30, "555-5555", "john@example.com");
console.log(person);
interface Person {
  name: string;
  age: number;
  phone?: string;
  email?: string;
}

function buildPerson(name: string, age: number, ...contact: [string, string]) {
  const [phone, email] = contact;
  return { name, age, phone, email };
}

const person: Person = buildPerson("John", 30, "555-5555", "john@example.com");
console.log(person);

📌 예제 36

function formatAddress(address) {
  return `${address.line1}\n${address.line2}\n${address.city}, ${address.state} ${address.zip}`;
}

const address = {
  line1: "123 Main St",
  line2: "Apt 2",
  city: "Anytown",
  state: "CA",
  zip: "12345",
};

console.log(formatAddress(address));
interface Address {
  line1: string;
  line2?: string;
  city: string;
  state: string;
  zip: string;
}

function formatAddress(address: Address) {
  return `${address.line1}\n${address.line2 ? address.line2 + '\n' : ''}${address.city}, ${address.state} ${address.zip}`;
}

const address: Address = {
  line1: "123 Main St",
  city: "Anytown",
  state: "CA",
  zip: "12345",
};

console.log(formatAddress(address));
profile
필요하다면 공부하는 개발자, 한승준

0개의 댓글